<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/jquery.min.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	
	<body>
		
		<div id="app"  v-cloak>
			<h2>{{address}}</h2>
			
			<input type="text" id="address" v-model="address" />
			
			<p>{{name}},{{age}}</p>
			<p>{{hobby}},{{hobby.length}}</p>
			<p>{{hobby[0]}}</p>
			<p>{{hobby[hobby.length-1]}}</p>
			<p>
				<span v-for="o in hobby">{{o}} </span>
			</p>
			
			<p>
				<span v-for="o,i in hobby">{{i}}-{{o}} </span>
			</p>
			
			<p>{{girl.age}},{{girl.name}}</p>
			
			<p v-show="girl.age>14">成年0</p>
			<p v-show="girl.age<=14">未成年0</p>
			
			<p v-if="girl.age>=14">成年</p>
			<p v-if="girl.age<14">未成年</p>
			<p v-if="money>=1900">一线不差钱</p>
			<p v-else-if="money>=1200">二线不差钱</p>
			<p v-else-if="money>=600">三线不差钱</p>
			<p v-else>我是屌丝</p>
			
			<a :href="url" target="_blank">百度一下</a>
			
			<br />
			<button onclick="alert(拍一拍)">点</button>
			
			<p>
				<button v-on:click="show">点</button>
			</p>
			
		</div>
		
	</body>
	
</html>

<script>
	/*创建Vue对象*/
	var vm=new Vue({
		
		el:"#app",
		data:{
			address : "上海大雁塔",
			name : "孙悟空",
			age : 500,
			money: 1000,
		    url:"https://www.baidu.com",
			hobby : ["西瓜","香蕉","桃子"],
			girl : {
				name : "范冰冰",
				age : 16
			}
		},
		methods:{
			show: function(){
				console.log("拍一拍！");
				alert("就这？？？")
			}
		}
	});
</script>
